<template>
  <div>
    <beautiful-chat
      :always-scroll-to-bottom="alwaysScrollToBottom"
      :close="closeChat"
      :colors="colors"
      :is-open="isChatOpen"
      :message-list="messageList"
      :message-styling="messageStyling"
      :new-messages-count="newMessagesCount"
      :on-message-was-sent="onMessageWasSent"
      :open="openChat"
      :participants="participants"
      :show-close-button="true"
      :show-launcher="true"
      :show-emoji="true"
      :show-file="false"
      :show-typing-indicator="showTypingIndicator"
      :show-edition="false"
      :show-deletion="false"
      :title-image-url="titleImageUrl"
      :disable-user-list-toggle="true"
      @onType="handleOnType"
      @edit="editMessage"
      @remove="removeMessage"
    >
      <template v-slot:header>
        <img
          :src="require('@/assets/logo.png')"
          alt="Logo"
          style="
            width: 5vh;
            height: 5vh;
            display: inline-block;
            margin-left: 2vh;
            margin-right: 2vh;
            background-color: white;
            border-radius: 50%;
            margin-top: 1vh;
          "
        />
        <h2 style="margin-top: 2vh">智能顾问</h2>
      </template>

      <template v-slot:system-message-body="{ message }">
        [System]: {{ message.text }}
      </template>
    </beautiful-chat>
  </div>
</template>

<script>
import { chat } from "@/api/ai";
export default {
  name: "chat",
  data() {
    return {
      participants: [
        {
          id: "ai",
          name: "Matteo",
          imageUrl:
            "https://static.vecteezy.com/system/resources/previews/000/439/863/non_2x/vector-users-icon.jpg",
        },
      ],
      titleImageUrl: "@/assets/logo.png",
      messageList: [
        {
          type: "text",
          author: `ai`,
          data: {
            text: `您好！我是由小和山保安队改造的基于Chatglm3-6b的智能顾问，😀，有什么问题都可以询问我。`,
          },
        },
      ],
      newMessagesCount: 0,
      isChatOpen: false,
      showTypingIndicator: "",
      colors: {
        header: {
          bg: "#4e8cff",
          text: "#ffffff",
        },
        launcher: {
          bg: "#4e8cff",
        },
        messageList: {
          bg: "#ffffff",
        },
        sentMessage: {
          bg: "#4e8cff",
          text: "#ffffff",
        },
        receivedMessage: {
          bg: "#eaeaea",
          text: "#222222",
        },
        userInput: {
          bg: "#f4f7f9",
          text: "#565867",
        },
        userList: {
          bg: "#fff",
          text: "#212121",
        },
      },
      alwaysScrollToBottom: true,
      messageStyling: true,
    };
  },
  methods: {
    onMessageWasSent(message) {
      console.log(message);
      this.messageList = [
        ...this.messageList,
        Object.assign({}, message, { id: Math.random() }),
      ];

      chat({
        message: message.data.text,
      }).then((res) => {
        console.log(res);
        this.messageList = [
          ...this.messageList,
          Object.assign({}, res, { id: Math.random() }),
        ];
      });
    },
    openChat() {
      this.isChatOpen = true;
      this.newMessagesCount = 0;
    },
    closeChat() {
      this.isChatOpen = false;
    },
    handleOnType() {
      this.$root.$emit("onType");
      this.userIsTyping = true;
    },
    editMessage(message) {
      const m = this.messageList.find((m) => m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    },
    removeMessage(message) {
      if (confirm("Delete?")) {
        const m = this.messageList.find((m) => m.id === message.id);
        m.type = "system";
        m.data.text = "This message has been removed";
      }
    },
  },
};
</script>

<style>
</style>